<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>个人中心</title>
    <meta name="keywords" content="文乐文" />
    <meta name="description" content="文乐文" />

    <link rel="stylesheet" href="static/css/swiper.min.css" type="text/css" />
    <link rel="stylesheet" href="static/css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="static/css/common.css" type="text/css" />
    <link rel="stylesheet" href="static/css/element2.css" />
    <script src="static/js/element-china-area-data.iife.js"></script>
  </head>

  <body>
    <div id="app" v-cloak>
      <!-- 包含头部 -->
      <div class="header_box">
        <!-- container-fluid -->
        <div class="header container">
          <div class="logo_box">
            <img src="static/picture/logo2.png" />
          </div>
          <div class="nav_box">
            <a href="index.html">
              <div class="item">首页</div>
            </a>
            <a href="goods.html">
              <div class="item">产品中心</div>
            </a>
            <a href="integral.html">
              <div class="item">积分商城</div>
            </a>
            <a href="lease.html">
              <div class="item">进销存ERP</div>
            </a>
            <a href="service.html">
              <div class="item">服务与支持</div>
            </a>
            <a href="my.html">
              <div class="item">个人中心</div>
            </a>
          </div>
          <div class="buy-box">
            <a href="javascript:;" class="tit">购买</a>
            <div class="sub" style="display: none">
              <div class="list">
                <a
                  target="_blank"
                  href="https://mall.jd.com/index-11504190.html?from=pc"
                  >文乐文京东旗舰店</a
                >
              </div>
            </div>
          </div>
          <div class="search_box">
            <input
              name="keyword"
              type="text"
              class="search_input"
              id="header_search_input"
              placeholder="搜索"
            />
            <button id="header_search_btn" class="search_btn"></button>
          </div>
        </div>
      </div>

      <div class="page_order_list container">
        <div class="title">地址管理</div>
        <div class="col-sm-12 address_new">
          <div class="btn_box">
            <el-button @click="bacgPage" type="warning" icon="el-icon-arrow-left"  size="small"></el-button>
            <el-button type="primary" size="small"  @click="showAdd = true">添加新地址</el-button>
          </div>
        </div>
        <div class="address_box">
          <div
            style="font-size: 15px;margin-bottom:20px;cursor: pointer;margin-top: 10px;"
           
            :class="item.isDefault?'active':''"
            style="cursor: pointer"
            class="col-sm-12 item"
            v-for="(item,index) in addresslist"
            :key="index"
          >
          <el-tag type="danger" v-if="item.isDefault">默认地址</el-tag>
            {{item.province}}{{item.city}}{{item.district}}{{item.detail}}
            {{item.realName}}{{item.phone}}

            <el-button type="primary" size="small" icon="el-icon-edit" circle @click.stop="edit(item)"></el-button>
            <el-button type="danger" size="small"  icon="el-icon-delete" circle @click.stop="del(item)"></el-button>
            <el-button type="danger" @click="setDefault(item)" size="small" v-if="!item.isDefault">设为默认</el-button>
          </div>
        </div>
        <div class="address_form" data-user_address_id="0" v-if="showAdd">
          <div class="col-sm-12 row" style="margin-bottom: 10px">
            <div class="col-sm-6 item">
              <div class="input-group">
                <span class="input-group-addon">姓名</span>
                <input
                  type="text"
                  v-model="addAddressForm.realName"
                  class="form-control"
                  name="name"
                />
              </div>
            </div>
            <div class="col-sm-6 item" style="margin-bottom: 10px">
              <div class="input-group">
                <span class="input-group-addon">电话</span>
                <input
                  type="text"
                  v-model="addAddressForm.phone"
                  class="form-control"
                  name="phone"
                />
              </div>
            </div>
          </div>
          <div class="col-sm-12 row" style="margin-bottom: 10px">
            <div class="col-sm-6 item">
              <div class="input-group">
                <span class="input-group-addon">省市区</span>
                <el-cascader
                  style="width: 100%"
                  v-model="addr"
                  ref="cascaderAddr"
                  :options="regionData"
                  :props="cityProps"
                  placeholder="请选择省市区"
                  @change="handleAddrChange"
                ></el-cascader>
              </div>
            </div>
            <div class="col-sm-6 item">
              <div class="input-group">
                <span class="input-group-addon">地址</span>
                <input
                  type="text"
                  v-model="addAddressForm.detail"
                  class="form-control"
                  name="address"
                />
              </div>
            </div>
          </div>
          <div
            class="col-sm-12 row"
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 10px 0;
            "
          >
            <div class="btn_box">
              <button
                id="confirm_address_btn"
                class="btn btn-primary"
                type="button"
                @click="addAddress"
              >
                保存
              </button>
              <button
                @click="showAdd = false"
                id="cancle_address_btn"
                class="btn btn-primary"
                type="button"
              >
                取消
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 包含公共底部文件 -->
      <div class="footer">
        <div class="footer_box container">
          <div class="contact_box col-sm-4 f-cb">
            <div class="dtitle">服务/Service</div>
            <div class="tel_box">
              <p class="title">全国统一热线电话</p>
              <p class="tel">0574-58974484</p>
            </div>
            <div class="mail_box">
              <p class="title">服务邮箱</p>
              <p class="mail">598292588@qq.com</p>
            </div>
          </div>
          <div class="nav_list col-sm-4 f-cb">
            <div class="dtitle">导航/Navigation</div>
            <ul class="nav_box">
              <li><a href="about.html">关于我们</a></li>
              <li><a href="">商品中心</a></li>
              <li><a href="lease.html">打印机租赁</a></li>
              <li><a href="service.html">服务与支持</a></li>
              <li><a href="contact.html">联系我们</a></li>
            </ul>
          </div>
          <div class="search col-sm-4 f-cb">
            <div class="dtitle">产品中心/Product center</div>
            <div class="search_box">
              <input class="search_input" name="keyword" placeholder="搜索" />
              <!-- <button class="btn btn-primary jd_btn" type="button">京东商城</button>-->
              <a
                class="btn btn-primary jd_btn"
                target="_blank"
                href="https://mall.jd.com/index-11504190.html?from=pc"
                >京东商城</a
              >
            </div>
            <div class="wechat_box">
              <div class="item">
                <img src="static/picture/wechat.svg" />
              </div>
              <div class="item">
                <img src="static/picture/weibo.svg" />
              </div>
            </div>
          </div>
        </div>

        <div class="site_info container">
          Copyright ©2020 宁波文乐文科技有限公司 版权所有
          <a href="https://beian.miit.gov.cn/#/Integrated/index"
            >浙ICP备2020041669号-1</a
          >
        </div>
      </div>
    </div>

    <script src="static/js/vue2.js"></script>
    <script src="static/js/element2.js"></script>
    <script src="static/js/jquery.js"></script>
    <script src="static/js/common.js"></script>
    <script src="static/js/pca-code.js"></script>
  </body>
</html>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      attr: {},
      addresslist: [],
      showAdd: false,
      cityProps: {
        value: "label", // 指定选项的 值 为选项对象的某个属性值
        label: "label", // 指定选项 标签 为选项对象的某个属性值
        children: "children", //指定选项的 子选项 为选项对象的某个属性值
      },
      regionData: elementChinaAreaData.regionData,
      cityList: cityoption,
      addAddressForm: {
        id: "",
        detail: "",
        isDefault: true,
        phone: "",
        realName: "",
        address: {
          city: "",
          district: "",
          province: "",
        },
      },
    },
    created() {
      var token = localStorage.getItem("token")
        ? localStorage.getItem("token")
        : "";

      if (!token) {
        this.$message.error("请先登录");
        setTimeout(() => {
          window.location.href = "./index.html";
        }, 1500);
      }

      this.getData();
    },
    methods: {
      handleAddrChange(e) {
        this.addr = e;
        this.addAddressForm.address.province = e[0];
        this.addAddressForm.address.city = e[1];
        this.addAddressForm.address.district = e[2];
      },
      getData() {
        $.ajax({
          url: apiurl + "/api/front/address/list",
          headers: {
            "Content-Type": "application/json",
            "Authori-zation": localStorage.getItem("token")
              ? localStorage.getItem("token")
              : "",
          },
          success: (res) => {
            this.addresslist = res.data.list;
          },
        });
      },
      addAddress() {
        $.ajax({
          url: apiurl + `/api/front/address/edit`,
          data: JSON.stringify(this.addAddressForm),
          type: "POST",
          headers: {
            "Content-Type": "application/json",
            "Authori-zation": localStorage.getItem("token")
              ? localStorage.getItem("token")
              : "",
          },
          success: (res) => {
            if (res.code == 200) {
              this.$message.success("操作成功");
              this.getData();
            } else {
              this.$message.error(res.message);
            }
          },
        });
      },
      del(item) {
        let data = {
          id: item.id,
        };
        $.ajax({
          url: apiurl + "/api/front/address/del",
          data: JSON.stringify(data),
          type: "POST",
          headers: {
            "Content-Type": "application/json",
            "Authori-zation": localStorage.getItem("token")
              ? localStorage.getItem("token")
              : "",
          },
          success: (res) => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.getData();
            } else {
              this.$message.error(res.message);
            }
          },
        });
      },
      setDefault(item){
          let data = {
              id: item.id
          }
          $.ajax({
              url: apiurl + '/api/front/address/default/set',
              data: JSON.stringify(data),
              type: 'POST',
              headers: {
                  'Content-Type': 'application/json',
                  "Authori-zation": localStorage.getItem("token")
                    ? localStorage.getItem("token")
                    : "",
              },
              success: (res) => {
                  if (res.code == 200) {
                    this.$message.success('设置成功')
                    this.getData();
                  } else {
                      ElMessage.error(res.message)
                  }
              },
          })
      },
      edit(item) {
        this.addAddressForm.id = item.id;
        this.addAddressForm.detail = item.detail;
        this.addAddressForm.realName = item.realName;
        this.addAddressForm.phone = item.phone;
        this.addAddressForm.address.province = item.province;
        this.addAddressForm.address.city = item.city;
        this.addAddressForm.address.district = item.district;

        this.showAdd = true;
      },
      bacgPage(){
        window.history.back();
      }
    },
  });
</script>

<style>
  .userInfo {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
  }
  .userInfo div {
    font-size: 17px;
    width: 50%;
    display: inline-block;
    margin-bottom: 10px;
  }
  .active {
    color: red;
  }
</style>
